<%--
  Created by IntelliJ IDEA.
  User: xdzy
  Date: 2017/4/10
  Time: 21:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>首页</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" href="./resources/css/amazeui.min.css"/>
    <link rel="stylesheet" href="./resources/css/admin.css">
    <link rel="stylesheet" href="./resources/css/style.css">
</head>
<body>
<jsp:include page="common1.jsp"/>
<div class="am-cf admin-main">
    <!-- sidebar start -->
    <div class="admin-sidebar am-offcanvas" id="admin-offcanvas">
        <div class="am-offcanvas-bar admin-offcanvas-bar">
            <ul class="am-list admin-sidebar-list">
                <li class="admin-parent">
                    <a class="am-cf" data-am-collapse="{target: '#myfriends'}">
                        <span class="am-icon-users"></span> 好友列表
                        <span class="am-icon-angle-right am-fr am-margin-right"></span>
                    </a>
                    <ul class="am-list am-collapse admin-sidebar-sub" id="myfriends">

                    </ul>
                </li>
            </ul>

        </div>
    </div>
    <!-- sidebar end -->

    <!-- content start -->
    <div class="admin-content">
        <div class="admin-content-body">

<ul class="am-list">
    <li><h3><img class='am-comment-avatar' width='38' height='38' src="./resources/images/${requestScope.friend.headImg}" alt="">
        chatTo${requestScope.friend.nickName}</h3>
    </li>
    <li>
        <div id="msgs">
        </div>
        <form action="">
            <textarea name="xxxx" id="xxxx" cols="30" rows="10"></textarea>
            <button type="button" onclick="send()">发送</button>
        </form>
    </li>
</ul>
        </div>
    </div>
</div>

<script src="./resources/js/jquery.min.js"></script>
<script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        //var json={"chatTo":"${requestScope.friend.uid}","myId":"${sessionScope.loginUser.uid}"}
        //var str=JSON.stringify(json);
        websocket = new WebSocket("ws://localhost:8080${pageContext.request.contextPath}/webChat/${sessionScope.loginUser.uid}");
    }
    else{
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function(){
        setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(event){
        setMessageInnerHTML("open");
    }

    //接收到消息的回调方法
    websocket.onmessage = function(){
        var msg=JSON.parse(event.data);
        if(msg.type=="advice"){
            alert("有来自"+msg.from+"的未读消息")
        }else{
            setMessageInnerHTML(event.data);
        }
    }

    //连接关闭的回调方法
    websocket.onclose = function(){
        setMessageInnerHTML("close");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        document.getElementById('msgs').innerHTML += "收到的消息："+innerHTML + '<br/>';
    }

    //关闭连接
    function closeWebSocket(){
        websocket.close();
    }

    //发送消息
    function send(){
        var message = document.getElementById('xxxx').value;
        var msg={"from":"${sessionScope.loginUser.uid}",
                "to":"${requestScope.friend.uid}","content":message,"type":"text"};
        document.getElementById('msgs').innerHTML +="我的消息："+ message + '<br/>';
        websocket.send(JSON.stringify(msg));
    }
</script>

<jsp:include page="common2.jsp"/>
</body>
</html>
